<template>
	<view>
		
		<u-cell-group v-if="list.length > 0">
			<u-cell :title="item.type" :label="item.createtime_text" v-for="(item,index) in list" :key="index" @click="detail(item.id)">
				<view class="del" slot="right-icon" @click="del(item.id,index)">删除</view>
			</u-cell>
		</u-cell-group>

		<u-empty mode="data" customStyle="padding-top:50px" v-else></u-empty>
		
		<navigator url="edit" class="complaint" hover-class="none">
			<u-icon name="plus-circle-fill" color="#00000090" size="45"></u-icon>
		</navigator>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color: 'common/color',
				color_value: 'common/color_value',
				system: 'common/system',
				ad: 'common/ad',
			})
		},
		data() {
			return {
				list: [],
				page: 1,
				over: 0,
			};
		},

		onLoad(options) {},
		onShow() {
			this.list = []
			this.page = 1
			this.over = 0
			this.ajax()
		},
		onReachBottom() {
			if (this.over == 0) {
				this.ajax()
			}
		},

		methods: {
			ajax() {
				this.http('complaint/index', '', 'get').then(res => {
					let data = res.data;
					this.list = this.list || [];
					this.list = this.list.concat(data.data);
					this.page++;
					if (!data.has_more) {
						this.over = 1;
					}
				});
			},

			detail(id) {
				uni.navigateTo({
					url: 'edit?id=' + id
				})
			},
			del(id, index) {
				uni.showModal({
					title: '温馨提示',
					content: '是否确定要删除？',
					success: (res) => {
						if (res.cancel) {
							//点击取消,默认隐藏弹框
						} else {
							//点击确定
							this.http('complaint/del', {
								id: id
							}, 'post').then(res => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								if (res.code == 1) {
									this.list.splice(index, 1)
								}
							});
						}
					},

				})

			}
		}
	};
</script>

<style>
	page{
		background-color: #fff;
	}
	.complaint {
		position: fixed;
		bottom: 80px;
		right: 15px;
		width: 45px;
		height: 45px;
		line-height: 35px;
		font-size: 20px;
		border-radius: 50%;
	}
	.del {
		width: 40px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		background-color: #f56c6c;
		color: #fff;
		font-size: 12px;
		border-radius: 5px;
	}
</style>
